<template>
    <div class="bigDiv">
        <div style="padding-top: 200px;" v-show="showloding">
            <van-loading size="50px" vertical>加载中...</van-loading>
        </div>

        <van-card v-for="item in list" :key="item" :desc="item.equipmentName" :title="item.number"
            v-show="item.usageSituation == '闲置' && item.equipmentStatus != 0">
            <template #tags>
                <div>项目点：{{ item.entryName }}</div>
                <div>进场时间：{{ item.applicationTime }}</div>
                <div>责任人：{{ item.projectLeader }}</div>
                <div v-show="item.belonging >= 1 && item.belonging <= 5">设备所属部门：数据{{ item.belonging }}部</div>
                <div v-show="item.belonging == 6">设备所属部门：办公室</div>
                <div v-show="item.belonging == 7">设备所属部门：其他</div>
                <div v-show="item.realDepartment >= 1 && item.realDepartment <= 5">设备实在部门：数据{{ item.realDepartment
                    }}部</div>
                <div v-show="item.realDepartment == 6">设备实在部门：办公室</div>
                <div v-show="item.realDepartment == 7">设备实在部门：其他</div>
            </template>
            <template #footer>
                <van-button size="mini" @click="showDetails(item)">详情</van-button>
                <van-button size="mini" @click="showChange(item)" v-show="zw == 2">转移</van-button>
                <van-button size="mini" @click="zhuis(item)">追溯</van-button>
            </template>
        </van-card>
        <!-- 详情遮罩层 -->
        <van-overlay v-if="showDetailsValue" :show="showDetailsValue" @click="showDetailsValue = false"
            :lock-scroll="false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <div class="deitDiv">
                        <detailsVue v-bind="deitItems"></detailsVue>
                    </div>
                    <van-button @click="showDetailsValue = false" type="primary" block>关闭</van-button>
                </div>
            </div>
        </van-overlay>

        <!-- 修改遮罩层 -->
        <van-overlay v-if="showChangeValue" :show="showChangeValue" @click="showChangeValue = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <changeVue v-bind="changeValue" @addEvent="closechange"></changeVue>
                </div>
            </div>
        </van-overlay>

        <!-- 追溯遮罩层 -->
        <van-overlay v-if="showZhuisValue" :show="showZhuisValue" @click="showZhuisValue = false" :lock-scroll="false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <div class="deitDiv">
                        <zhuisVue :zhuisId="zhuisId"></zhuisVue>
                    </div>
                    <van-button @click="showZhuisValue = false" type="primary" block>关闭</van-button>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script setup>
import { onMounted, ref, reactive } from "vue";
import detailsVue from "./details.vue";
import changeVue from './change.vue';
import zhuisVue from "./zhuisu.vue";
import {
    //获取数据列表
    gettables,
} from "../../sevce/user";
const showloding = ref(true)
const list = ref([])
//获取表格数据
function gettable() {
    gettables('查询所有数据', 1).then((res) => {
        console.log(res)
        list.value = res.data
        showloding.value = false
    })
}
//查看详情
const showDetailsValue = ref(false)
function showDetails(item) {
    showDetailsValue.value = true
    deitItems.value = item
}

//需显示的详情项，传递到子组件
// const deitItems = reactive()
const deitItems = ref()
//修改
const changeValue = ref()

const showChangeValue = ref(false)

function showChange(item) {
    showChangeValue.value = true
    changeValue.value = item
}
//关闭修改窗
function closechange() {
    showChangeValue.value = false
}
//查看追朔 
const zhuisId = ref()
const showZhuisValue = ref(false)
function zhuis(item) {
    showZhuisValue.value = true
    zhuisId.value = item.id
}
//zw
let zw = ref()
onMounted(() => {
    zw.value = JSON.parse(localStorage.getItem('userinfo')).position
    gettable()
})
</script>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 100vw;
    height: 80vh;
    background-color: #fff;
}

.bigDiv {
    width: 100vw;
    height: 92vh;
    overflow-y: scroll;
}

.deitDiv {
    width: 100vw;
    height: 75vh;
    overflow-y: scroll;
}
</style>